<template>
  <div id="app">
    <!-- <img src="./assets/logo.png"> -->
    <header class='header'>
      <h1>数字看板</h1>
    </header>
    <div class="content">
      <div class="nav-left">
        <Menu :theme="theme" accordion>
            <Submenu name="1">
                <template slot="title">
                    <Icon type="ios-paper"></Icon>
                    图表类型
                </template>
                <MenuItem name="1-1" @click.native="addComponent('bar')">柱形图</MenuItem>
                <MenuItem name="1-2" @click.native="addComponent('line1')">折线图</MenuItem>
                <MenuItem name="1-3" @click.native="addComponent('circle1')">饼线图</MenuItem>
                <MenuItem name="1-4" @click.native="addComponent('map1')">地图</MenuItem>
            </Submenu>
            <Submenu name="2">
                <template slot="title">
                    <Icon type="ios-people"></Icon>
                    categoryTwo
                </template>
                <MenuItem name="2-1" @click.native="addComponent('items1')">轮播图</MenuItem>
                <MenuItem name="2-2" @click.native="addComponent('CategOne2')">categoryOne2</MenuItem>
                <MenuItem name="2-3" @click.native="addComponent('CategOne3')">categoryOne3</MenuItem>
                <MenuItem name="2-4" @click.native="addComponent('CategOne4')">categoryOne4</MenuItem>
            </Submenu>
            <Submenu name="3">
                <template slot="title">
                    <Icon type="stats-bars"></Icon>
                    categoryThree
                </template>
                <MenuGroup title="categoryThree1">
                    <MenuItem name="3-1" @click.native="addComponent('CategOne1')">categoryOne1</MenuItem>
                    <MenuItem name="3-2" @click.native="addComponent('CategOne2')">categoryOne2</MenuItem>
                </MenuGroup>
                <MenuGroup title="categoryThree2">
                    <MenuItem name="3-1" @click.native="addComponent('CategOne1')">categoryOne1</MenuItem>
                    <MenuItem name="3-2" @click.native="addComponent('CategOne2')">categoryOne2</MenuItem>
                </MenuGroup>
            </Submenu>
        </Menu>
      </div>
      <div class="nav-right">
        <div class="layout" :class="{'layout-hide-text': spanLeft < 4}">
          <Row type="flex" class="main-content">
            <Col :span="spanRight">
              <!-- 其他组件的占位 -->
              <div id='container'>
                 <div :is="element.component" :style='style' :order="'order_'+index" v-drag="greet" v-for="(element,index) in components"></div><!-- @click.native="setActiveComponent(element)" -->
              </div>
            </Col>
            <Col :span="spanLeft" class="layout-menu-left">
                <Menu active-name="1" width="auto" class="control-container">
                    <div class="control">
                    <h4 class="control-title">图表参数</h4>
                        <div class="control-items" >
                            <label>宽:<input type="text" :value="width" id="target-width" placeholder="X%" ></label>
                            <label>高:<input type="text" :value="height" id="target-height" placeholder="Y%"></label>
                            <!-- <color class="color"></color> -->
                            <!-- <button type="button" class="btn" >确认</button> -->
                        </div>
                    </div>
                </Menu>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import Vue from 'vue'
import bar from './components/bar.vue'
import line1 from './components/line.vue'
import circle1 from './components/circle.vue'
import map1 from './components/map.vue'
import {mapState,mapGetters,mapActions} from 'vuex'

export default {
  name: 'app',
  data () {
      return {
          theme: 'dark',
          spanLeft: 3,
          spanRight: 21,
          order : '',
          style:{
            width:'25%',
            height:'25%',
          }
      }
  },
  computed:{
      ...mapState([
        'height',
        'width',
      ]),
      ...mapGetters({
        components: 'components',
        activeComponents: 'activeComponents',
      })
    },
  updated(){
    this.activeDiv()
  },  
  methods: {
    greet:function(val){
        this.val = val;
    },
    activeDiv:function(){ 
        let allDiv = document.getElementsByClassName('echarts');
        // let allDiv = this.components;
        // console.log(allDiv)
        let targetHeight = document.getElementById('target-height');
        let targetWidth = document.getElementById('target-width');

        for (let i = 0; i < allDiv.length; i++) {

        allDiv[i].onclick = function(){
              // console.log(this.activeComponents);
              
              // console.log(111)

              for (let j = 0; j < allDiv.length; j++) {
                allDiv[j].style.border = '2px solid blue';
              }
              
              allDiv[i].style.border = '2px solid red';

              targetHeight.value = allDiv[i].style.height;
              targetWidth.value = allDiv[i].style.width;

              targetHeight.onchange = (function(e){
                allDiv[i].style.height = e.target.value;
              })

              targetWidth.onchange = (function(e){
                allDiv[i].style.width = e.target.value;
              })

              return;
            }
        }
    },
    ...mapActions([
      'setActiveComponent',
      'addComponent',
    ]),
  },

  components: {
      bar,
      line1,
      circle1,
      map1,
    }
  }
</script>

<style lang="less">
  html{
    height: 100%;
  }
  body{
    margin: 0;
    height: 100%;
  }
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    height: 100%;
    position: relative;
  }

  .header{
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-family: "楷体";
    background: linear-gradient(to right, rgba(100,200,200,0.6), rgba(0,100,255,0.8));
    color: #fff;
    font-size: 20px;
    position: absolute;
  } 
  .content{
    padding-top: 80px;
    height: 100%;
    background-color: #111;
    display: flex;
  }
  .nav-left{
    background-color: rgba(0,200,200,0.3);
    width: 200px;
    height: 100%;
  }
  .ivu-menu-dark{
    background-color: rgba(0,200,200,0.1);
    width: 200px!important;
  }
  .ivu-menu-vertical .ivu-menu-item,
  .ivu-menu-vertical .ivu-menu-submenu-title{
    padding: 15px 10px;
  }
  .ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item{
    padding-left: 25px;
  }

  .nav-right{
    flex: 1;
    height: 100%;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened{
    background-color: rgba(0,200,200,0.1);
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-opened .ivu-menu-submenu-title{
    background-color: rgba(0,200,200,0.1);
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-item:hover,
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu-title:hover{
    background-color: rgba(0,200,200,0.3);
  }

  .layout{
    background: #f5f7f9;
    position: relative;
    overflow: hidden;
    height: 100%;
  }
  .main-content{
    height: 100%;
  }
  .layout-menu-left{
    background-color: #fff;
    height: 100%;
  }
  .layout-header{
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #111;
  }

  .layout-ceiling-main a{
    color: #9ba7b5;
  }
  .layout-hide-text .layout-text{
    display: none;
  }
  .ivu-col{
    transition: width .2s ease-in-out;
  }

  .ivu-menu-vertical .ivu-menu-item,
  .ivu-menu-vertical .ivu-menu-submenu-title{
    cursor: pointer;
  }

  .ivu-menu-item a{
    display: block;
    width: 173px;
    height: 21px;
  }

  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active,
  .ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active:hover{
    background: rgba(0,0,255,0.1)!important;
    color: #fff;
  }

  #container{
    width: 100%;
    height: 100%;
    background:rgba(0,150,100,0.2);
    background-image: linear-gradient(white 2px,transparent 0),
      linear-gradient(90deg, white 2px,transparent 0),
      linear-gradient(hsla(0,0%,100%,.3) 1px,transparent 0),
      linear-gradient(90deg,hsla(0,0%,100%,.3) 1px,transparent 0);
    background-size:100px 100px,100px 100px,20px 20px,20px 20px;
  }

 .control-container{
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,100,255,0.8), rgba(100,200,200,0.8));
}
.control{
  height: 100%;
  .control-title{
    height: 50px;
    line-height: 50px;
    color: white;
    background-color: rgba(0,100,255,0.9);
  }
  .control-items{
    height: 100%;
    padding: 10px;
    label{
      color: #000;
      font-weight: 600;
      display: block;
      height: 40px;
      line-height: 40px;
      input{
        margin: 0 5px;
        padding: 0 5px;
        width: 50%;
        height: 25px;
      }
    }
    .btn{
      width: 70%;
      height: 28px;
      outline: none;
      border: 0;
      background-color: rgba(0,100,255,0.5);
      margin-top: 5px;
      cursor: pointer;
      color: #fff;
    }
    .color{
      width: 100%;
    }
  }
}
</style>








